<template>
  <div>
    <!-- 导航 -->
    <!-- <a href="#/find">发现音乐</a> |
    <a href="#/my">我的音乐</a> |
    <a href="#/friend">朋友</a> -->
    <router-link to="/find">发现音乐</router-link> |
    <router-link to="/my">我的音乐</router-link> |
    <router-link to="/friend">朋友</router-link>
    <!-- 路由跳转 -- 通过锚点进行跳转 -->
    <!-- 
      声明式导航：指的是通过router-link标签来实现导航跳转的方法
      
      router-link优点：自带两个选中类名
        router-link-exact-active
        router-link-active
        那么我们就可以通过这些类名实现导航高亮效果
     -->
    <!-- 7、设置路由挂载点 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.router-link-active{
  color: red;
  font-weight: bold;
}
</style>